<template>
  <view class="page-container">
    <!-- 顶部欢迎区域 -->
    <view class="header">
      <!-- 新增：右上角退出按钮 -->
      <view class="logout-btn" @click="handleLogout" v-if="isLogin">
        <text>退出</text>
      </view>

      <view class="user-info">
        <image class="avatar" :src="avatarUrl" @click="chooseAvatar"></image>
        <view class="welcome-text">
          <!-- 未登录显示固定文本，登录后显示用户名 -->
          <text class="greeting">HI~{{ isLogin ? username : '欢迎回来' }}</text>
          <!-- 未登录显示登录按钮，登录后隐藏 -->
          <button class="login-btn" @click="navigateToLogin" v-if="!isLogin">登录</button>
        </view>
      </view>

      <view class="stats">
        <text class="stat-item">关注3</text>
        <text class="divider">|</text>
        <text class="stat-item">话题0</text>
      </view>

      <view class="func-buttons">
        <view class="func-item">
          <text class="icon">★</text>
          <text class="text">收藏</text>
        </view>
        <view class="func-item">
          <text class="icon">🕒</text>
          <text class="text">历史</text>
        </view>
        <view class="func-item">
          <text class="icon">⚙️</text>
          <text class="text">设置</text>
        </view>
      </view>
    </view>

    <!-- 红包广告区域 -->
    <view class="ad-banner">
      <image class="ad-icon" src="/static/redpacket.png"></image>
      <text class="ad-text">瓜分30万现金红包</text>
      <text class="ad-more">速抢 >></text>
    </view>

    <!-- 中间内容区域 -->
    <view class="content">
      <view class="feature-icons">
        <view class="icon-item">
          <view class="icon-bg color1">📝</view>
        </view>
        <view class="icon-item">
          <view class="icon-bg color2">📷</view>
        </view>
        <view class="icon-item">
          <view class="icon-bg color3">🔗</view>
        </view>
      </view>

      <text class="stats-text">已有385,893人</text>
      <text class="subtext">在这里发布身边的新鲜事</text>

      <button class="publish-btn" @click="handlePublish">我要发布</button>
      <text class="link-text" @click="handleBrowse">先去逛逛</text>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        avatarUrl: '/static/logo.png', // 头像默认图片
        isLogin: false, // 登录状态标记
        username: '' // 用于存储登录后的用户名
      }
    },
    onShow() {
      // 页面显示时检查登录状态，获取用户名
      this.checkLoginStatus()
      // 同步更新底部tabBar文本
      this.updateTabBarText()
    },
    methods: {
      // 检查登录状态，获取用户信息
      checkLoginStatus() {
        const userInfo = uni.getStorageSync('userInfo')
        if (userInfo && userInfo.username) {
          // 已登录：更新状态和用户名
          this.isLogin = true
          this.username = userInfo.username
          this.avatarUrl = userInfo.avatar || '/static/logo.png'
        } else {
          // 未登录：重置状态
          this.isLogin = false
          this.username = ''
          this.avatarUrl = '/static/logo.png'
        }
      },

      // 新增：更新底部tabBar文本
      updateTabBarText() {
        if (typeof uni.setTabBarItem === 'function') {
          uni.setTabBarItem({
            index: 3, // 第四个tab（对应pages.json中list的第四个元素，索引从0开始）
            text: this.isLogin ? '我的' : '未登录'
          })
        }
      },

      // 选择头像（仅登录状态可操作）
      chooseAvatar() {
        if (!this.isLogin) {
          uni.showToast({ title: '请先登录', icon: 'none' })
          return
        }
        uni.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success: (res) => {
            this.avatarUrl = res.tempFilePaths[0];
            // 更新本地存储的头像
            const userInfo = uni.getStorageSync('userInfo')
            userInfo.avatar = res.tempFilePaths[0]
            uni.setStorageSync('userInfo', userInfo)
          },
          fail: (err) => {
            console.log('选择图片失败：', err);
          },
        });
      },

      // 跳转到登录页面
      navigateToLogin() {
        uni.navigateTo({
          url: '/pages/login/login' // 假设登录页路径为/pages/login/login
        });
      },

      // 新增：退出登录
      handleLogout() {
        uni.showModal({
          title: '确认退出',
          content: '确定要退出当前账户吗？',
          success: (res) => {
            if (res.confirm) {
              // 清除本地存储的用户信息
              uni.removeStorageSync('userInfo')
              // 更新页面状态
              this.isLogin = false
              this.username = ''
              this.avatarUrl = '/static/logo.png'
              // 退出后同步更新tabBar文本
              this.updateTabBarText()
              // 提示退出成功
              uni.showToast({ title: '已退出登录' })
            }
          }
        })
      },

      // 切换底部导航
      switchTab(type) {
        switch(type) {
          case 'news':
            uni.switchTab({url: '/pages/news/news'});
            break;
          case 'video':
            uni.switchTab({url: '/pages/video/video'});
            break;
          case 'topic':
            uni.switchTab({url: '/pages/topic/topic'});
            break;
          case 'mine':
            // 当前已是我的页面，无需跳转
            break;
        }
      },

      // 我要发布
      handlePublish() {
        // 检查是否登录，未登录则先跳转登录
        if (!this.isLogin) {
          uni.showModal({
            title: '提示',
            content: '发布内容需要先登录',
            success: (res) => {
              if (res.confirm) {
                this.navigateToLogin();
              }
            }
          });
          return
        }
        // 已登录，执行发布操作
        uni.showToast({ title: '跳转到发布页面' })
      },

      // 先去逛逛
      handleBrowse() {
        uni.switchTab({
          url: '/pages/news/news'
        });
      }
    }
  }
</script>

<style>
  .page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f5f5f5;
  }

  /* 顶部区域样式 */
  .header {
    background: linear-gradient(to bottom, #ff7e5f, #feb47b);
    padding: 40rpx 30rpx 30rpx;
    color: #fff;
    border-bottom-left-radius: 30rpx;
    border-bottom-right-radius: 30rpx;
    position: relative; /* 新增：为退出按钮定位 */
  }

  /* 新增：退出按钮样式 */
  .logout-btn {
    position: absolute;
    top: 40rpx;
    right: 30rpx;
    font-size: 28rpx;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 8rpx 20rpx;
    border-radius: 20rpx;
  }

  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
  }

  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border: 4rpx solid rgba(255, 255, 255, 0.6);
    margin-right: 20rpx;
  }

  .welcome-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .greeting {
    font-size: 32rpx;
    margin-bottom: 10rpx;
  }

  .login-btn {
    width: auto;
    padding: 8rpx 20rpx;
    background-color: #fff;
    color: #ff7e5f;
    font-size: 24rpx;
    border-radius: 20rpx;
    line-height: normal;
  }

  .stats {
    display: flex;
    margin-bottom: 30rpx;
    font-size: 28rpx;
  }

  .stat-item {
    margin: 0 15rpx;
  }

  .divider {
    color: rgba(255, 255, 255, 0.6);
  }

  .func-buttons {
    display: flex;
    justify-content: space-around;
  }

  .func-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .func-item .icon {
    font-size: 40rpx;
    margin-bottom: 10rpx;
  }

  .func-item .text {
    font-size: 24rpx;
    opacity: 0.9;
  }

  /* 广告横幅 */
  .ad-banner {
    display: flex;
    align-items: center;
    background-color: #fff;
    margin: 20rpx;
    padding: 15rpx 20rpx;
    border-radius: 15rpx;
    border-left: 6rpx solid #ff4d4f;
  }

  .ad-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 15rpx;
  }

  .ad-text {
    flex: 1;
    font-size: 26rpx;
    color: #333;
  }

  .ad-more {
    font-size: 24rpx;
    color: #ff4d4f;
  }

  /* 中间内容区 */
  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40rpx 20rpx;
  }

  .feature-icons {
    display: flex;
    margin-bottom: 60rpx;
  }

  .icon-item {
    margin: 0 30rpx;
  }

  .icon-bg {
    width: 100rpx;
    height: 100rpx;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50rpx;
    color: #fff;
    box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
  }

  .color1 {
    background-color: #4e86fc;
  }

  .color2 {
    background-color: #ff7d73;
  }

  .color3 {
    background-color: #ffc857;
  }

  .stats-text {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 15rpx;
  }

  .subtext {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 60rpx;
  }

  .publish-btn {
    width: 60%;
    height: 80rpx;
    background-color: #ff7e5f;
    color: #fff;
    border-radius: 40rpx;
    font-size: 28rpx;
    line-height: 80rpx;
    margin-bottom: 20rpx;
  }

  .link-text {
    font-size: 26rpx;
    color: #4e86fc;
    text-decoration: underline;
  }

  /* 底部导航 */
  .tab-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 120rpx;
    background-color: #fff;
    border-top: 1rpx solid #eee;
  }

  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
  }

  .tab-item.active {
    color: #ff7e5f;
  }

  .tab-icon {
    font-size: 40rpx;
    margin-bottom: 5rpx;
  }

  .tab-text {
    font-size: 24rpx;
  }
</style>